<template>
  <div>
    <Muuri />


    <h4>animation api动画示例</h4>
    <div class="animate"></div>
    <button @click="play">播放动画</button>
  </div>
</template>

<script setup>
import Muuri from "./components/muuri.vue";
import { defineProps, reactive, onMounted } from "vue";

const play = () => {
  let ani1 = [
    { transform: "rotate(0)", backgroundColor: "red" },
    { backgroundColor: "blue", offset: 0.1 }, // offset = 什么位置开始
    { transform: "rotate(360deg)", backgroundColor: "black" },
  ];
  let aniOpt1 = {
    duration: 1000,
    iterations: Infinity,
    easing: "ease-in-out",
  };

  let ani = document.querySelector(".animate").animate(ani1, aniOpt1);
  ani.pause();

  setTimeout(() => {
    ani.play();
  }, 1000);
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.animate {
  width: 200px;
  height: 200px;
}
</style>